<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
import openPanel from '@/assets/bit-screen/monitor/openPanel_L.png'
import closePanel from '@/assets/bit-screen/monitor/closePanel_L.png'
import TreeSelector from './components/TreeSelector.vue'
import { getAirportList } from '@/api/home'
// 搜索机场
const airportName = ref<string>('')
const isSearched = ref(false)
const searchList = ref([])
const allPort = ref([] as any)
const taskPort = ref([] as any)


// 把接口返回数据处理成 需要的结构
const dealData = (nowPort,type) => {
  nowPort.map((item, index) => {
    item.open = true;
    item.checked = false
    item.status = '在线'
    item.id = item.id.toString()
    item.children = [
      { id: `child${item.id}-1`, name: `${item.name}舱内画面`, url: item.internalMonitorUrl, checked: false, astatus: item.astatus },
      { id: `child${index + 1}-2`, name: `${item.name}舱外画面`, url: item.internalMonitorUrl, checked: false ,astatus: item.astatus},
    ]
    if (item.cameraUrl) {
      item.children.push({ id: `child${index + 1}-3`, name: `${item.name}无人机画面`, url: item.cameraUrl, checked: false ,astatus: item.astatus})
    }

  })
}

const searchAirport = () => {
  isSearched.value = true;
  searchList.value.splice(0, searchList.value.length);

  // 将搜索关键字转换为小写  
  const searchKeyword = airportName.value.toLowerCase();

  // 如果是当前选中的是任务中机场  
  if (activeName.value === 'first') {
    taskPort.value.map((item) => {
      // 将机场名称转换为小写进行比较  
      if (item.name.toLowerCase().includes(searchKeyword)) {
        searchList.value.push(item);
      }
    });
  } else {
    allPort.value.map((item) => {
      // 将机场名称转换为小写进行比较  
      if (item.name.toLowerCase().includes(searchKeyword)) {
        searchList.value.push(item);
      }
    });
  }
};
const activeName = ref('second')
const tabList = ref([
  { label: '任务中机场', name: 'first' },
  { label: '全部机场', name: 'second' }
])


const props = defineProps({
  cell: { type: Number, required: true },
  showPortList: { type: Array, default: () => [] }
})

const emit = defineEmits(['updateCell', 'updateShowList', 'clearPlayList'])
// 清除所有列表选中状态
const clearChecked = () => {
  allPort.value.map((item) => {
    if (item.children.length > 0) {
      item.checked = false
      item.children.map((it) => {
        it.checked = false
      })
    } else {
      item.checked = false
    }
  })
  taskPort.value.map((item) => {
    if (item.children.length > 0) {
      item.checked = false
      item.children.map((it) => {
        it.checked = false
      })
    } else {
      item.checked = false
    }
  })

}
const sendCell = (num: number) => {

  clearChecked()
  emit('updateCell', num)
}
// 默认开启
const drawer = ref(true)
const toggleDrawer = () => {
  drawer.value = !drawer.value
}

const handleChange = (data) => {
  allPort.value = data
}
// 切换任务中和全部机场
const handleClick = (tab: TabsPaneContext, event: Event) => {
  airportName.value = ''
  isSearched.value = false
  searchList.value.splice(0, searchList.value.length)
  // 清空所有机场选中
  clearChecked()
  emit('clearPlayList')

}

// 接口调用获取机场列表数据
const handleGetAirportList = async () => {

  const res = await getAirportList()
  allPort.value = res.data.airportList
  taskPort.value = res.data.runningAirportList

  dealData(allPort.value,'all')
  dealData(taskPort.value,'task')
}
onMounted(() => {
  handleGetAirportList()
})

</script>

<template>

  <img class="side-icon" @click="toggleDrawer" v-if="!drawer" :src="openPanel" :class="[drawer ? 'isOpen' : 'isClose']"
    alt="" />
  <div class="lf-con" :class="[drawer ? 'lf-isOpen' : 'lf-isClose']">
    <img @click="toggleDrawer" :src="closePanel" alt="" v-if="drawer" class="side-icon"
      :class="[drawer ? 'isOpen' : 'isClose']" />
    <p class="flex justify-between"><span class="title-box">机场列表</span>
    <p>
      <Icon @click="sendCell(4)" class="icon" :class="{ 'icon_active': cell === 4 }" icon="svg-icon:fourCell" :size="13" />
      <Icon @click="sendCell(9)" class="icon" :class="{ 'icon_active': cell === 9 }" icon="svg-icon:nineCell" :size="13" />
    </p>
    </p>
    <div class="mt-4">
      <el-input v-model="airportName" style="max-width: 600px; height: 40px; margin-bottom: 15px" placeholder="请输入机场名称"
        @keyup.enter="searchAirport">
        <template #append>
          <el-button :icon="Search" @click="searchAirport" />
        </template>
      </el-input>
      <el-tabs stretch v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
          <TreeSelector :cell="cell" :allPort="allPort" :isSearched="isSearched" :taskPort="taskPort"
            :searchList="searchList" @changePortStatus="handleChange" :activeTab="activeName" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-input__wrapper) {
  background-color: none;
  background: rgba(255, 255, 255, 0);
  border: 1px solid #0C6EBA;
}

:deep(.el-tabs) {
  height: 100%;

}

:deep(.el-tabs__item) {
  color: #99B1DD !important;

}

:deep(.el-checkbox) {
  color: white !important;
}

:deep(.el-tabs__content) {
  height: 80%;
  overflow-y: auto;
}

.lf-isClose {
  z-index: -1;
  position: absolute;
}

.lf-isOpen {
  width: 20%;
  margin-right: 25px;
  z-index: 2001;
  position: relative;
  background: rgba(9, 36, 74, 0);
  height: 95%;
  box-shadow: none;
  background-color: @main-bgColor;
  border: 1px solid #0C6EBA;
  padding: 22px 12px;
}

// 背景色
@main-bgColor: #10223f;
@second-bgColor: #3c60de;
@main-color: #C4D7EE;

:deep(.tree-item) {
  margin-bottom: 10px;
  font-size: 14px;
  color: #C4D7EE;

}

:deep(.el-checkbox__label) {
  color: #C4D7EE;
}

.side-icon {
  position: absolute;
  z-index: 9999;
  cursor: pointer;
  position: absolute;
  right: -40px;
  bottom: 100px;

}

.isClose {

  bottom: 150px;
  position: absolute;
  left: 0;


}

.lf-con {
  height: 95%;

  .mt-4 {
    height: 100%;

  }

  .title-box {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #F6F9FE;
    font-style: italic;
    background: linear-gradient(180deg, rgba(14, 197, 236, 0.8) 0%, rgba(49, 190, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 58.7646484375%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100px;


  }

  .icon {
    color: #818595;
    margin-right: 10px;
    cursor: pointer;
  }

  .icon_active {
    color: white;
  }
}

:deep(.el-input-group__append) {
  background-color: @second-bgColor;

}

:deep(.el-icon) {
  color: white;
}

:deep(.el-checkbox.el-checkbox--large .el-checkbox__inner) {
  border: 1px solid rgb(112, 108, 108);


}

:deep(.el-input__inner) {
  color: white;

}


:deep(.el-tabs__item.is-top.is-active) {
  color: white;
  background-color: @second-bgColor;
  background: rgba(57, 109, 230, 0.55);
  color: #C4D7EE !important;
}

.example-showcase .el-dropdown+.el-dropdown {
  margin-left: 15px;
}
</style>
